<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .one{
            box-sizing: border-box;/*边框+内边距+内容*/
            height: 300px;
            width: 300px;
            border: 10px solid red;
            /*
               盒子模型：标签在页面中所占的大小
                    四个部分：外边距-边框-内边距-内容
               外边距：标签到标签到之间的距离
               内边距：内容到边框的距离
               默认情况下，标签的尺寸是按照内容+内边距+边框三个合起来的尺寸
               我们设置的高和宽其实是内容的高和宽，并不是标签的高和宽
               如果我们想要设置高和宽的尺寸为内容+内边距+边框三个加起来的尺寸值
               可以通过属性box-sizing设置为border-box就可以实现
            */
            margin: 0 auto;
            padding: 60px;
        }
    </style>
</head>
<body>
    <div class="one">第一个div标签</div>
</body>
</html>